<template>
  <div class="goods-list">
    <div class="goods-list-title">商品列表</div>
    <el-form ref="goodsListFormRef"
             :model="goodsListForm"
             :inline="true"
             class="goodsListForm">
      <el-form-item label="商品编号"
                    placeholder="店铺编号/名称"
                    label-width="140px">
        <el-input v-model="goodsListForm.goodsId"></el-input>
      </el-form-item>
      <el-form-item label="所属店铺"
                    placeholder="店铺名称"
                    label-width="80px">
        <el-input v-model="goodsListForm.includeShop"></el-input>
      </el-form-item>
      <el-form-item label="商品类别">
        <el-select v-model="goodsListForm.goodsCateOne"
                   label-width="80px">
          <el-option label="一级分类"
                     value="businessOne"></el-option>
          <el-option label="一级分类"
                     value="businessTwo"></el-option>
        </el-select>
        <el-select v-model="goodsListForm.goodsCateTwo"
                   label-width="80px">
          <el-option label="二级分类"
                     value="businessOne"></el-option>
          <el-option label="二级分类"
                     value="businessTwo"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="goodsListFormBtn">
        <el-button type="primary"
                   @click="queryGoodsInfo">查询</el-button>
        <el-button @click="onResetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="exportGoodsList">
      <el-button @click="exportExcel">导出</el-button>
    </div>
    <div class="shopListTable">
      <el-table :data="tableData">
        <el-table-column prop="goodsId"
                         label="商品编号">
        </el-table-column>
        <el-table-column prop="belongShop"
                         label="所属店铺"
                         width="120">
        </el-table-column>
        <el-table-column prop="shopImage"
                         label="商品图">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px"
                      :src="scope.row.shopImage"
                      fit="cover">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="shopName"
                         label="商品名称"
                         width="120">
        </el-table-column>
        <el-table-column prop="shopType"
                         label="商品类型"
                         width="120">
        </el-table-column>
        <el-table-column prop="costPrice"
                         label="成本价">
        </el-table-column>
        <el-table-column prop="oldPrice"
                         label="原价">
        </el-table-column>
        <el-table-column prop="salePrice"
                         label="销售价">
        </el-table-column>
        <el-table-column prop="inventory"
                         label="库存量">
        </el-table-column>
        <el-table-column prop="monthSaleNum"
                         label="月销量">
        </el-table-column>
        <el-table-column prop="totalSaleNum"
                         label="总销量">
        </el-table-column>
        <el-table-column prop="monthSaleMoney"
                         label="月销售额">
        </el-table-column>
        <el-table-column prop="totalSaleMoney"
                         label="总销售额">
        </el-table-column>
        <el-table-column prop="shopActivities"
                         label="参与活动">
        </el-table-column>
        <el-table-column prop="isHotSale"
                         label="热销"
                         width="60">
          <template slot-scope="scope">
            <el-tag type="success"
                    v-if="scope.row.isHotSale">是</el-tag>
            <el-tag type="danger"
                    v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isRecomment"
                         label="推荐"
                         width="60">
          <template slot-scope="scope">
            <el-tag type="success"
                    v-if="scope.row.isRecomment">是</el-tag>
            <el-tag type="danger"
                    v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="shopStatus"
                         label="状态"
                         width="60">
          <template slot-scope="scope">
            <el-tag type="success"
                    v-if="scope.row.shopStatus">上架</el-tag>
            <el-tag type="danger"
                    v-else>下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="200">
          <template slot-scope="scope">
            <span class="handleBtn"
                  @click="scope.row.shopStatus = !scope.row.shopStatus">{{scope.row.shopStatus ? '下架' : '上架'}}</span>
            <span class="handleBtn"
                  @click="deleteGoodsInfo(scope.$index)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage4"
                     :page-sizes="[5, 10, 20, 50]"
                     :page-size="5"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="20">
      </el-pagination>
    </div>
  </div>
</template>
<script>
// import FileSaver from 'file-saver'
import { getGoodsList } from '@/api/test'
import { export_json_to_excel as exportJson } from '@/components/shop/venter/Export2Excel'
export default {
  name: 'ShopList',
  data () {
    return {
      goodsListForm: {
        goodsId: '',
        includeShop: '',
        goodsCateOne: [],
        goodsCateTwo: []
      },
      // url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      tableData: [],
      // tableData: [{
      //   goodsId: 15484486,
      //   belongShop: '美宜佳-保利店',
      //   shopImage: '行业一',
      //   shopName: '牛逼轰轰新西兰猪肉500g',
      //   shopType: '类型一，子类别一',
      //   costPrice: 'xxx元',
      //   oldPrice: 'xxx元',
      //   salePrice: 'xxx元',
      //   inventory: '20',
      //   saleMoney: 'xxx元',
      //   monthSaleNum: '10',
      //   totalSaleNum: '10',
      //   monthSaleMoney: '10',
      //   totalSaleMoney: '10',
      //   shopActivities: '打折促销',
      //   isHotSale: '是',
      //   isRecomment: '是',
      //   shopStatus: '上架'
      // }],
      currentPage4: 4
    }
  },
  props: {},
  components: {},
  created () {
    this.loadGoodsList()
  },
  mounted () {
  },
  computed: {},
  methods: {
    async loadGoodsList () {
      console.log(this.$route.params.shopName);
      const { data: res } = await getGoodsList()
      console.log(res);
      if (!this.$route.params.shopName) {
        this.tableData = res.data
      } else {
        const data = res.data.filter(item => {
          return this.$route.params.shopName === item.belongShop
        })
        console.log(data);
        this.tableData = data
        setItem()
      }
    },
    isSoleOut () {
      this.tableData.shopStatus = !this.tableData.shopStatus
    },
    queryGoodsInfo () {
      console.log(this.goodsListForm);
      if (this.goodsListForm.goodsId === '' && this.goodsListForm.includeShop === '' && this.goodsListForm.goodsCateOne === '' && this.goodsListForm.goodsCateTwo === '') {
        return this.loadGoodsList()
      }
      const queryResults = this.tableData.filter(item => {
        if (this.goodsListForm.goodsId && this.goodsListForm.includeShop === '' && this.goodsListForm.goodsCateOne === '' && this.goodsListForm.goodsCateTwo === '') {
          return item.goodsId === this.goodsListForm.goodsId - 0
        } else if (this.goodsListForm.goodsId === '' && this.goodsListForm.includeShop && this.goodsListForm.goodsCateOne === '' && this.goodsListForm.goodsCateTwo === '') {
          return this.goodsListForm.includeShop === item.belongShop
        }
        // } else if (goodsListForm.shopname === '' && goodsListForm.includeShop === '' && goodsListForm.goodsCateOne && goodsListForm.goodsCateTwo) {
        //   return goodsListForm.goodsCateOne === item.shopType && goodsListForm.goodsCateTwo === item.shopTypeTwo
        // } else if (goodsListForm.shopname && goodsListForm.includeShop && goodsListForm.goodsCateOne && goodsListForm.goodsCateTwo) {
        //   return goodsListForm.shopname === item.shopName && goodsListForm.goodsCateOne === item.shopType && goodsListForm.goodsCateTwo === item.shopTypeTwo
        // } else if (goodsListForm.shopname === '' && goodsListForm.includeShop && goodsListForm.goodsCateOne && goodsListForm.goodsCateTwo) {
        //   return goodsListForm.includeShop === item.belongShop && goodsListForm.goodsCateOne === item.shopType && goodsListForm.goodsCateTwo === item.shopTypeTwo
        // }
      })
      console.log(queryResults);
      this.tableData = queryResults
    },
    onResetForm () {
      this.$refs.goodsListFormRef.resetFields()
      this.loadGoodsList()
    },
    deleteGoodsInfo (index) {
      this.tableData.splice(index, 1)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    // 导出表格
    exportExcel () {
      require.ensure([], () => {
        const tHeader = ['商品编号', '所属店铺', '商品名称', '商品类型', '成本价', '原价', '销售价', '库存量', '月销量', '总销量', '月销售额', '总销售额', '参与活动', '热销', '推荐', '状态']
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['goodsId', 'belongShop', 'shopName',
          'shopType', 'costPrice', 'oldPrice',
          'salePrice', 'inventory',
          'monthSaleNum', 'totalSaleNum', 'monthSaleMoney',
          'totalSaleMoney', 'shopActivities', 'isHotSale',
          'isRecomment', 'shopStatus']
        // 上面的是tableData里对象的属性
        const list = this.tableData // 把data里的tableData存到list
        const data = this.formatJson(filterVal, list)
        exportJson(tHeader, data, '商品列表');
      });
    },
    formatJson (filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }
  }
}
</script>
<style scoped lang="less">
.handleBtn {
  cursor: pointer;
}
.goods-list {
  padding: 15px;
  .pagination {
    margin-top: 30px;
    text-align: center;
  }
}
.goods-list-title {
  margin-bottom: 15px;
}
.goodsListForm {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-top: 15px;
  .goodsListFormBtn {
    margin-left: 30px;
  }
}
/deep/.exportGoodsList {
  height: 40px;
  margin: 15px 0;
  .el-button {
    background-color: #169bd5;
    color: #fff;
    float: right;
    &::after {
      /*伪元素是行内元素 正常浏览器清除浮动方法*/
      content: '';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .clearfix {
      *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
  }
}
/deep/.shopListTable {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  tbody {
    td {
      text-align: center;
    }
  }
  thead {
    th {
      text-align: center;
    }
  }
  .handleBtn {
    text-decoration: underline;
    color: blue;
    margin-right: 5px;
    &:last-child {
      color: red;
    }
  }
}
</style>